<script setup>
const ifShowComparison = ref(false);
const showComparasion = () => {
  ifShowComparison.value = true;
};
const ifShowDetail = ref(false);
const ecologicalType = ref('');
const capabilityTag = ref([]);
const professionalLabel = ref([]);
const industryLabel = ref([]);
const tableData = ref([
  {
    name: '中移建设有限公司',
    ecologicalType: '集成调测类伙伴',
    capabilityTag: '集成,安装服务,运营运维',
    professionalLabel: '云,网,运营运维',
    industryLabel: '全行业',
    companyScale: 10,
    qualification: 10,
    cooperationCase: 10,
    riskAssessment: 10,
    solutionCapability: '/',
    integrationCapability: 10,
    productCapability: '/',
    operationCapability: 10,
    developmentAbility: '/',
    totalScore: 90
  },
  {
    name: '润建股份有限公司',
    ecologicalType: '集成调测类伙伴',
    capabilityTag: '集成,安装服务,运营运维',
    professionalLabel: 'AI,网,云,运营运维',
    industryLabel: '全行业',
    companyScale: 8,
    qualification: 8,
    cooperationCase: 8,
    riskAssessment: '/',
    solutionCapability: '/',
    integrationCapability: 6,
    productCapability: '/',
    operationCapability: 10,
    developmentAbility: '/',
    totalScore: 76
  },
  {
    name: '新华三技术有限公司',
    ecologicalType: '硬件套软类伙伴',
    capabilityTag: '设备/套软',
    professionalLabel: '云,网,安全',
    industryLabel: '全行业',
    companyScale: 15,
    qualification: 13,
    cooperationCase: 13,
    riskAssessment: 11,
    solutionCapability: 7,
    integrationCapability: 8,
    productCapability: 10,
    operationCapability: '/',
    developmentAbility: '/',
    totalScore: 88
  },
  {
    name: '浪潮',
    ecologicalType: '软件平台类伙伴',
    capabilityTag: '平台',
    professionalLabel: '平台,云,大数据,AI',
    industryLabel: '全行业',
    companyScale: 12,
    qualification: 14,
    cooperationCase: 6,
    riskAssessment: 5,
    solutionCapability: 3,
    integrationCapability: '/',
    productCapability: '/',
    operationCapability: '/',
    developmentAbility: 20,
    totalScore: 72
  }
]);
</script>

<template>
  <div>
    <div id="body">
      <div class="container">
        <div class="header">
          <div class="seach">
            <el-input
              placeholder="请输入公司名称"
              style="width: 240px"
            ></el-input>
            <el-select
              placeholder="请选择生态类型"
              style="width: 240px"
              v-model="ecologicalType"
            >
              <el-option label="集成调测类伙伴" />
              <el-option label="硬件套软类伙伴" />
              <el-option label="软件平台类伙伴" />
              <el-option label="安装服务类伙伴" />
              <el-option label="运营运维类伙伴" />
            </el-select>
            <el-select
              placeholder="请选择能力标签"
              multiple
              style="width: 240px"
              v-model="capabilityTag"
            >
              <el-option label="集成" />
              <el-option label="运营运维" />
              <el-option label="安装服务" />
              <el-option label="设备/套软" />
              <el-option label="平台/定软" />
            </el-select>
            <el-select
              placeholder="请选择专业标签"
              multiple
              style="width: 240px"
              v-model="professionalLabel"
            >
              <el-option label="云" />
              <el-option label="网" />
              <el-option label="运营运维" />
              <el-option label="AI" />
              <el-option label="安全" />
              <el-option label="平台" />
              <el-option label="大数据" />
              <el-option label="视联网" />
            </el-select>
            <el-select
              placeholder="请选行业标签"
              multiple
              style="width: 240px"
              v-model="industryLabel"
            >
              <el-option label="全行业" />
              <el-option label="党政" />
              <el-option label="执法" />
              <el-option label="交通" />
              <el-option label="农商" />
              <el-option label="教育" />
              <el-option label="医疗" />
              <el-option label="金融" />
              <el-option label="运营运维" />
              <el-option label="互联网" />
            </el-select>
            <el-button>搜索</el-button>
            <el-button @click="showComparasion">对比</el-button>
            <el-button>计分说明</el-button>
          </div>
        </div>

        <div class="main">
          <el-table :data="tableData">
            <el-table-column
              prop="name"
              label="公司名称"
              width="180"
              align="center"
              fixed="left"
            />
            <el-table-column
              prop="ecologicalType"
              label="生态类型"
              width="100"
              align="center"
              fixed="left"
            />
            <el-table-column
              prop="capabilityTag"
              label="能力标签"
              width="180"
              align="center"
              fixed="left"
            />
            <el-table-column
              prop="professionalLabel"
              label="专业标签"
              width="180"
              align="center"
              fixed="left"
            />
            <el-table-column
              prop="industryLabel"
              label="行业标签"
              width="100"
              align="center"
              fixed="left"
            />
            <el-table-column
              prop="totalScore"
              label="综合指数"
              width="110"
              align="center"
              sortable
            />
            <el-table-column
              label="公司规模指数"
              prop="companyScale"
              width="140"
              align="center"
              sortable
            />
            <el-table-column
              label="资质认证指数"
              prop="qualification"
              width="140"
              align="center"
              sortable
            />
            <el-table-column
              label="合作案例指数"
              prop="cooperationCase"
              width="140"
              align="center"
              sortable
            />
            <el-table-column
              label="风险评估指数"
              prop="riskAssessment"
              width="140"
              align="center"
              sortable
            />
            <el-table-column
              label="解决方案能力指数"
              prop="solutionCapability"
              width="160"
              align="center"
              sortable
            />
            <el-table-column
              label="集成能力指数"
              prop="integrationCapability"
              width="140"
              align="center"
              sortable
            />
            <el-table-column
              label="设备/套软能力指数"
              prop="productCapability"
              width="170"
              align="center"
              sortable
            />
            <el-table-column
              label="运营运维能力指数"
              prop="operationCapability"
              width="160"
              align="center"
              sortable
            />
            <el-table-column
              label="平台/定软开发能力指数"
              prop="developmentAbility"
              width="200"
              align="center"
              sortable
            />
            <el-table-column width="80" align="center" fixed="right">
              <el-button
                link
                type="primary"
                size="small"
                @click="ifShowDetail = true"
              >
                公司详情
              </el-button>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <comparisonDialog
      v-show="ifShowComparison"
      @close="ifShowComparison = false"
      :data="tableData"
    />
    <detail v-show="ifShowDetail" @close="ifShowDetail = false" />
  </div>
</template>

<style scoped lang="scss">
#body {
  width: 100%;
  min-width: 1000px;
  height: 100vh;
  background: url('./assets/Bg.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .container {
    width: 98vw;
    height: 90vh;
    background-color: #fff5;
    box-shadow: 0 8px 16px #0005;
    border-radius: 20px;
    overflow: hidden;

    .header {
      height: 9%;
      padding: 0 15px;
      .seach {
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
      }
    }
    .main {
      background: white;
      height: 100%;
    }
  }
}
</style>
